<template>
  <div>
    <div class="el-card basic-container__card is-always-shadow">
      <div class="el-card__body">
        <!-- START goBack -->
        <div class="el-page-header haruyuki-mb-20">
          <div
            class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
            @click="goBack"
          >
            <i class="el-icon-arrow-left"></i>
            <div class="haruyuki-size-16">返回</div>
          </div>
          <div class="el-page-header__content">商户变更审核</div>
        </div>
        <section class="merchant-container">
          <alterForm
            :isAlterDisabledShow="isAlterDisabledShow"
            ref="toAlterForm"
          />
          <div class="merchant-padding">
            <auditForm
              :auditForm="auditForm"
              :rejectList="rejectList"
              @submitAudit="submitAuditSucceed"
              ref="toAuditForm"
            />
          </div>
          <div class="haruyuki-flex-x-end haruyuki-mt-20 haruyuki-mb-40">
            <el-button size="medium" icon="el-icon-close" @click="goBack"
              >取消</el-button
            >
            <el-tooltip content="修改商户变更信息" placement="top">
              <el-button
                type="primary"
                size="medium"
                icon="el-icon-edit"
                @click="submitEdit"
                >修改</el-button
              >
            </el-tooltip>
            <el-tooltip content="审核商户变更信息" placement="top">
              <el-button
                type="primary"
                size="medium"
                icon="el-icon-finished"
                @click="submitAudit"
                >审核</el-button
              >
            </el-tooltip>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { updateMerRecord } from "@/api/rb-service/merrecord/mer_change_record";
import alterForm from "@/components/rb-merchant/alter-form.vue";
import auditForm from "@/components/rb-merchant/audit-form.vue";

export default {
  components: {
    alterForm,
    auditForm,
  },
  data() {
    return {
      isAlterDisabledShow: true, //是否禁止 alter组件内容
      auditForm: {
        auditSuccess: "1",
        auditType: "",
        auditReason: "",
        auditWay: "",
      },
      rejectList: [],
    };
  },
  created() {
    const id = this.$route.query.id;
    this.$nextTick(() => {
      this.$refs["toAlterForm"].getMerhchantDetailPlus(id);
    });
  },
  methods: {
    /* 提交审核 */
    submitAudit() {
      this.$refs["toAuditForm"].submitAudit();
    },
    /* 成功返回变更管理界面 */
    submitAuditSucceed(code) {
      if (code === 200) {
        this.goBack();
      }
    },
    submitEdit() {
      this.$refs["toAlterForm"].$refs["alterForm"].validate((valid) => {
        if (valid) {
          updateMerRecord(this.$refs["toAlterForm"].alterForm).then(
            (res) => {
              if (res.data.code === 200) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                // this.emptyForm();
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /**
     * @func 清空
     * @desc OEM表单信息 清空
     * */
    emptyForm() {
      this.$refs["toAlterForm"].$refs["alterForm"].resetFields();
      this.$refs["toAlterForm"].basicForm = {};
      this.$refs["toAlterForm"].accountFrontList = [];
      this.$refs["toAlterForm"].accountReverseList = [];
      this.$refs["toAlterForm"].openPermitList = [];
      this.$refs["toAlterForm"].ecardFrontList = [];
      this.$refs["toAlterForm"].ecardReverseList = [];
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.pos-container {
  background-color: #ffffff;
  .pos-title {
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    // color: #a1c4fd;
  }
  .pos-content {
    background: #f2f2f2;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
  }
}

.merchant-container {
  padding: 0 40px;
  background: #ffffff;
}
.merchant-padding {
  padding: 20px;
}
</style>